<template>
	<view class="continar">
		<!--#ifdef H5-->
		<view class="top-content">
			<!--#endif-->
			<!--#ifdef MP-->
			<view class="top-content" style="padding-top: 200rpx;">
				<!--#endif-->
				<up-navbar title="我的" :titleStyle="{ color: '#212121', fontSize: '18px', fontWeight: 'bold' }"
					 @leftClick="leftClick" :bgColor='bgColor'>
				</up-navbar>
				<view class="tab-contianr">
					<view class="tab-item" :class="{ 'tab-itemAc': index === dftab }" v-for="(item,index) in tabList"
						:key="index" @click="tabChange(index)">
						{{item}}
					</view>
				</view>


			</view>
			<view class="content-box" v-show="dftab == 0">
				<!-- 	<view class="date-title">
					6月21号
				</view> -->
				<view class="zwSerices" v-if="mythrowList.length <1">
					  暂无数据
				</view>
				<view class="info-continar" v-for="(item,index) in mythrowList" :key="index">
					<view class="date-bewtten">
					<view class="date" style="font-size: 24rpx;color: #666666;">
						{{dayjs(item.dredgeTime).format('YYYY-MM-DD HH:mm:ss')}}
					</view>
					<view class="" style="font-weight: 500;font-size: 24rpx;color: #FF6A00;" @click="testCHAnasge" v-if="item.otherRoomName">
						已接受{{item.otherRoomName}}桌邀请
					</view>
			<!-- 		<view class="" style="font-weight: 500;font-size: 24rpx;color: #FF6A00;" @click="testCHAnasge" v-if="item.otherMemberName">
						已接受{{item.otherMemberName}}邀请
					</view> -->
					</view>
					<view class="info-text">
						{{item.msg}}
					</view>
					<view class="img-continar" v-if="item.image">
						<image :src="item.image" @click="previewImage(item.image)" mode=""></image>
					</view>
					<view class="number-bewtten">
				<!-- 		<view class="number-views">
							浏览数：{{item.readCount}}
						</view> -->
						<image class="delete" src="https://oss.jtmckj.com/drifbottle/delete.png" mode=""
							@click="mydelete(item)"></image>
					</view>
				</view>
			</view>
			<view class="content-box" v-show="dftab == 1">
				<!-- 	<view class="date-title">
					6月21号
				</view> -->
				<view class="zwSerices" v-if="myaskforList.length <1">
					  暂无数据
				</view>
				<view class="info-continar" v-for="(item,index) in myaskforList" :key="index">
					<view class="date-bewtten">
						<view class="date">
							{{dayjs(item.operTime).format('YYYY-MM-DD HH:mm:ss')}}
						</view>
						<view class="atcion-box">
							<view class="djs-btn" v-if="item.answerState === ''">
								待接受
							</view>
							<view class="djs-btn" v-if="item.answerState ==='0'">
								已拒绝
							</view>
							<view class="djs-btn" v-if="item.answerState ==='1'">
								已接受{{item.roomName ? item.roomName  + '桌台': ''}}
							</view>
							<view class="ch-btn" v-if="item.recoveryState == '0'"   @click.stop="ciclkRecovery(item)">
								未撤回
							</view>
							<view class="ch-btn" v-if="item.recoveryState == '1'" style="color: #666666;">
								已撤回
							</view>
						</view>
					</view>
					<view class="info-text">
						{{item.msg}}
					</view>
					<view class="img-continar" v-if="item.image">
						<image :src="item.image" @click="previewImage(item.image)"></image>
					</view>
					<view class="number-bewtten">
					<!-- 	<view class="number-views">
							浏览数：{{item.dredgeCount}}
						</view> -->
						<image @click="yqdelete(item)" class="delete" src="https://oss.jtmckj.com/drifbottle/delete.png" mode=""></image>
					</view>
				</view>


			</view>
		</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {ref} from 'vue';
	import {http} from '@/api/pzApi/http/api.js';
	const tabList = ref(['我的拼桌', "我的邀请"])
	const dftab = ref(0)
	const tabChange = (v) => {
		dftab.value = v
		if (v == 0) {
			restgetmythrow()
		} else {
			restgetmyaskfor()
		}
	}
	const globalData = uni.getStorageSync('userInfo')


	const bgColor = ref('transparent');
	onPageScroll(e => {
		if (e.scrollTop < 20) {
			bgColor.value = 'transparent'
		} else {
			bgColor.value = '#fde7f5'
		}
	})

	const leftClick = () => {
		uni.navigateBack({
			delta: 1 // 返回的页面数
		});
	}


	const mythrowList = ref([])
	const myaskforList = ref([])
	const acceptList = ref([])

	const pageSize1 = 10
	const pageIndex1 = ref(1)
	const countValue = ref(null)
	const pageCount = ref(null)
	
	
	const loading = ref(true)
	 
	const getmythrow = async (loading) => {
		if(loading) {
			 uni.showLoading({
			 	title: '加载中'
			 });
		}

		let params = {
			"functionName": "getBootleMyThrow",
			"orgCode": globalData.orgCode,
			"contentData": {
				"memberCode": globalData.userCode,
				"answerState": "",
				"recoveryState": "",
				"pageSize": pageSize1,
				"pageIndex": pageIndex1.value
			}
		} 
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			console.log(res, 'res---------------------')
			if (res.opFlag == 1) {
				mythrowList.value = [...mythrowList.value,...res.content.rowData]
				mythrowList.value.map(item => {
					if (Object.keys(item.otherRoomName).length === 0 && item.otherRoomName.constructor === Object) {
						item.otherRoomName = ""; // 将空对象转换为空字符串
					}
				
				})
				countValue.value = res.content.count
				pageCount.value = Math.ceil(countValue.value / pageSize1)
				console.log(pageCount.value, 'pageCount------------')
			}

		} catch (error) {
			console.error('Error:', error);
		} finally {
        uni.hideLoading();
        }
	}

	getmythrow(true)

    const testCHAnasge = ()=> {
		uni.navigateTo({
			url:'/pagesSupply/view/home/index'
		})
	}
 
	 const pageSize2 = 10
	 const pageIndex2 = ref(1)
	 const countValue2 = ref(null)
	 const pageCount2 = ref(null)
    
	//我的邀请
	const getmyaskfor = async (loading) => {
			if(loading) {
				 uni.showLoading({
				 	title: '加载中'
				 });
			}
		let params = {
			"functionName": "getBootleMyAskFor",
			"orgCode": globalData.orgCode,
			"contentData": {
				"otherMemberCode": globalData.code,
				"answerState": "",
				"recoveryState": "",
				"pageSize": pageSize2,
				"pageIndex": pageIndex2.value
			}
		} 
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			console.log(res, '我的邀请---------------------')
			if (res.opFlag == 1) {
				myaskforList.value = [...myaskforList.value,...res.content.rowData]
				countValue2.value = res.content.count
				pageCount2.value = Math.ceil(countValue2.value / pageSize2)
			}

		} catch (error) {
			console.error('Error:', error);
		} finally {
        uni.hideLoading();
        }
	}
   
   const restgetmythrow = ()=>{
	   mythrowList.value = []
	   pageIndex1.value = 1
	   pageCount.value = 1
	   getmythrow(false)
   }
    
	const mydelete = async (v) => {
		console.log(v, 'xxxxxxxxxc-----------')
		
		let params = {
			"functionName": "bottleDestroy",
			"orgCode": globalData.orgCode,
			"contentData": {
				"sessionid": uni.getStorageSync('sessionId'),
				"memberCode": v.memberCode,
				"bottleCode": v.bottleCode
			}
		}
		console.log(params, 'paramsxxxxxxxxx')
		try {
			const res = await http.post('/AppMemberMallProcess', params); 
			if (res.opFlag == 1) {
				  uni.showToast({
				  	title: '删除成功',
				  	icon: 'success',
				  	duration: 2000
				  })
				restgetmythrow()
			} else {
				uni.showToast({
					title: res.opMsg,
					icon: 'success',
					duration: 2000
				})
			}

		} catch (error) {
			console.error('Error:', error);
		}

	}


   const restgetmyaskfor = ()=>{
	   myaskforList.value = []
	   pageIndex2.value = 1
	   pageCount2.value = 1
	   getmyaskfor(false)
   }
 
const yqdelete = async (v) => {
		console.log(v, 'xxxxxxxxxc-----------')
		let params = {
			"functionName": "bottleDestroyAskFor",
			"orgCode": globalData.orgCode,
			"contentData": {
				"sessionid": uni.getStorageSync('sessionId'),
				"itemCode": v.itemCode,
				"otherMemberCode": globalData.userCode,
				"memberCode": v.memberCode,
				"bottleCode": v.bottleCode
			}
		}
		console.log(params, 'paramsxxxxxxxxx')
		try {
			const res = await http.post('/AppMemberMallProcess', params); 
			if (res.opFlag == 1) {
                  uni.showToast({
                  	title: '删除成功',
                  	icon: 'success',
                  	duration: 2000
                  })
			     restgetmyaskfor()
			} else {
				uni.showToast({
					title: res.opMsg,
					icon: 'success',
					duration: 2000
				})
			}

		} catch (error) {
			console.error('Error:', error);
		}

	}
	
	
	//撤回邀请
	const ciclkRecovery = async (v)=> {
		console.log(v,'撤回邀请vvvvvvvvvvv')
		let params = {
			"functionName": "bottleRecovery",
			"orgCode": globalData.orgCode,
			"contentData": {
				"sessionid": uni.getStorageSync('sessionId'),
				"otherMemberCode": v.memberCode,
				"itemCode": v.itemCode,
				"bottleCode": v.bottleCode,
				"memberCode":globalData.userCode
			}
		}
	
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			console.log(res, '撤回邀请---------------------')
			if (res.opFlag == 1) {
		          uni.showToast({
		          	title: '操作成功',
		          	icon: 'success',
		          	duration: 2000
		          })
			     restgetmyaskfor()
			} else {
					uni.showToast({
						title: res.opMsg,
						icon: 'none',
						duration: 2000
					})
			}
		
		} catch (error) {
			console.error('Error:', error);
		}
		
	}
	
   const canLoadMore = ref(null) // 控制是否可以加载更多
   
	// 上拉加载更多
	onReachBottom(() => {

		if (dftab.value == 0) {
			if (pageCount.value > pageIndex1.value) {
				pageIndex1.value++
				getmythrow(true)
				
			} else {
				uni.showToast({
					title: '没有下一页数据',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
		} else {
           if (pageCount2.value > pageIndex2.value) {
           	pageIndex2.value++
           	getmyaskfor(true)
			canLoadMore.value = true
           } else {
			 if (!canLoadMore.value) return; // 如果不允许加载，直接返回

           	uni.showToast({
           		title: '没有下一页数据',
           		//将值设置为 success 或者直接不用写icon这个参数
           		icon: 'success',
           		//显示持续时间为 2秒
           		duration: 2000
           	})
           }



		}
	});
	
   //预览图片
	  const previewImage = ((img) => {
			uni.previewImage({
			  current: img, // 当前显示图片的http链接
			  urls: [img] // 需要预览的图片http链接列表
			});
		});
	
	//下拉刷新
	onPullDownRefresh(() => {
		console.log('onPullDownRefresh...')
	});
</script>

<style scoped lang="scss">
	.continar {
		// height: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
		padding-bottom: 30rpx;

		.top-content {
			padding: 0 32rpx;
			padding-top: 100rpx;
			height: 750rpx;
			background: linear-gradient(0deg, #F2F2F2, #FFE5F6);
		}

		.tab-contianr {
			position: relative;
			z-index: 9999;
			padding: 0 109rpx 0 92rpx;
			display: flex;
			justify-content: space-between;

			.tab-item {
				position: relative;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
			}

			.tab-itemAc {
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
			}

			.tab-itemAc::before {
				content: '';
				position: absolute;
				left: 50rpx;
				bottom: -25rpx;
				width: 60rpx;
				height: 16rpx;
				background: url('https://oss.jtmckj.com/drifbottle/tab-ac.png') no-repeat;
				background-size: 100% 100%;
			}

			.tab-itemAc:nth-child(2)::before {
				left: 36rpx !important;
			}
		}

		.content-box {
			transform: translateY(-350px);
			padding: 0 32rpx;
			// padding-top: 70rpx;
			padding-top: 30rpx;

			.date-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
			}

			.info-continar {
				padding: 24rpx;
				margin-top: 23rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.date-bewtten {
					display: flex;
					justify-content: space-between;

					.date {
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}

					.atcion-box {
						display: flex;

						.djs-btn {
							font-weight: 500;
							font-size: 24rpx;
							color: #F24479;
							padding-right: 16rpx;
							margin-right: 16rpx;
							border-right: 1rpx solid #CCCCCC;
						}

						.ch-btn {
							font-weight: 500;
							font-size: 24rpx;
							color: #00AAFF;
						}
					}
				}


				.info-text {
					margin-top: 22rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #212121;
				}

				.img-continar {
					margin-top: 20rpx;

					image {
						border-radius: 10rpx;
						width: 200rpx;
						height: 200rpx;
					}
				}

				.number-bewtten {
					// margin-top: 15rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.number-views {

						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}

					.delete {
						width: 28rpx;
						height: 28rpx;
					}
				}

			}
		}

		.year {
			margin-top: 40rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
			font-size: 48rpx;
			color: #212121;
		}
	}
	.zwSerices {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>